<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华为商城官网</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="huawei.css">
</head>

<body>
    <!-- 导航条 -->
    <div id="nav">
        <div id="nav-top">
            <div class="top-ul">
                <ul>
                    <li>首页</li>
                    <li>华为官网</li>
                    <li>荣耀官网</li>
                    <li>花粉俱乐部</li>
                    <li>帮助中心</li>
                    <li>V码(优购码)</li>
                    <li>企业购</li>
                    <li>Select Region</li>
                    <li>下载APP
                        <p class="fa fa-sort-desc"></p>
                        <p class="fa fa-sort-asc"></p> &nbsp;|</li>
                    <li>更多精彩
                        <p class="fa fa-sort-desc"></p>
                        <p class="fa fa-sort-asc"></p>
                    </li>
                </ul>
            </div>
            <div class="top-ul list">
                <ul>
                    <li>请登录</li>
                    <li>注册</li>
                    <li>我的订单</li>
                    <li class="fa fa-cart-plus">&nbsp;&nbsp;&nbsp;购物车(0)</li>
                </ul>
            </div>
        </div>
        <div id="nav-bottom">
            <img id="logo" src="img/logo.png">
            <ul id="bottom-list">
                <li>华为专区</li>
                <li>荣耀专区</li>
                <li>HUAWEI P20</li>
                <li>荣耀V10</li>
                <li>nova 3</li>
                <li>荣耀10</li>
            </ul>
            <div id="bottom-input">
                <input type="text" placeholder="HUAWEI nova 3 荣耀Play" id="input">
                <span class="fa fa-search"></span>
            </div>
        </div>
    </div>

    <!-- 横幅 -->
    <div id="banner">
        <div id="banner-list">
            <div class="banner-call">
                <p>手机</p>
                <span>荣耀&nbsp;&nbsp;HUAWEI P系列
                    <p class="fa fa-angle-right"></p>
                </span>
            </div>
            <div class="banner-call">
                <p>手机</p>
                <span>荣耀&nbsp;&nbsp;HUAWEI P系列
                    <p class="fa fa-angle-right"></p>
                </span>
            </div>
            <div class="banner-call">
                <p>手机</p>
                <span>荣耀&nbsp;&nbsp;HUAWEI P系列
                    <p class="fa fa-angle-right"></p>
                </span>
            </div>
            <div class="banner-call">
                <p>手机</p>
                <span>荣耀&nbsp;&nbsp;HUAWEI P系列
                    <p class="fa fa-angle-right"></p>
                </span>
            </div>
            <div class="banner-call">
                <p>手机</p>
                <span>荣耀&nbsp;&nbsp;HUAWEI P系列
                    <p class="fa fa-angle-right"></p>
                </span>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div id="content">
        <div id="main">
            <div id="main-left">
                <div>
                    <img id="proper" src="img/proper.png">
                </div>
                <div id="left-right">
                    <p>欢迎来到华为商城，请
                        <a href="#">登录</a>
                        <br> 还没账号？
                        <a href="#">注册</a>即可享受&nbsp;>
                    </p>

                    <div class="fuli">新人福利</div>
                    <div class="fuli">会员频道</div>
                </div>
            </div>

            <div id="main-center">
                <div class="center-icon">
                    <div class="icon"></div>
                    <p>企业购</p>
                </div>
                <div class="center-icon">
                    <div class="icon img2"></div>
                    <p>以旧换新</p>
                </div>
                <div class="center-icon">
                    <div class="icon img3"></div>
                    <p>优选配件</p>
                </div>
                <div class="center-icon">
                    <div class="icon img4"></div>
                    <p>会员领劵</p>
                </div>
                <div class="center-icon">
                    <div class="icon img5"></div>
                    <p>数码特惠</p>
                </div>
                <div class="center-icon">
                    <div class="icon img6"></div>
                    <p>手机充值</p>
                </div>
            </div>
            <div id="main-right">
                <div id="right-top">
                    <span id="gg">公&nbsp;告</span>
                    <span id="text-lunbo">助力nova新机-回收限时加价</span>
                </div>
                <div id="right-bottom">
                    <div class="icon img7"></div>
                    <span>优购码</span>
                    <div class="icon img8"></div>
                    <span>实名认证</span>
                    <div class="icon img9"></div>
                    <span>补购保障</span>
                </div>
            </div>
        </div>

        <!-- 内容-4个广告部分 -->
        <div id="advertisement">
            <div class="adv bg1"></div>
            <div class="adv bg2"></div>
            <div class="adv bg3"></div>
            <div class="adv bg4"></div>
        </div>

        <!-- 热销单品 -->
        <div id="hot">
            <h1 id="hot-title">热销单品</h1>
            <div id="single">
                <div id="gxt"></div>
                <div class="product">
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                    <div class="danping">
                        <div class="product-icon">
                            <p class="icon-hot">热卖</p>
                        </div>
                        <p>荣耀10</p>
                        <span>限时优惠100 赠精美配件</span>
                        <p>￥2599</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>